
<script type="text/javascript">
    $(document).ready(function(){
        $("#protocol").focus(function(){
               $(this).val("");
        })
        .autocomplete({
            source: '/cartasur/answers/ajaxuserobjectives.json?user_id=' + ($("#protocol_users_id").val()),
            minLength: 2,
            focus: function( event, ui ) {
                $( "#protocol" ).val( ui.item.objective_text );
                return false;
            },
            select: function( event, ui ) {
                $( "#protocol" ).val( ui.item.objective_text ).blur();
                $("#theprotocol").val(ui.item.id).trigger('change');
                //lose focus
                return false;

            }
        }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li>" )
                    .append( "<a>" + item.objective_text + "<br/></a>" )
                    .appendTo( ul );
        };


        $("select#protocol_users_id").change(function(){ //if you change dd change here!!

            var id_value_string = $(this).val();
            if (id_value_string === "") {
                // if the id is empty remove all the sub_selection options from being selectable and do not do any ajax
                $("select#objective_objective_id option").remove();
                var row = "<option value=\"" + "" + "\">" + "" + "</option>";
                $(row).appendTo("select#objective_objective_id");
            }
            else {
                // Clear all options from sub category select
                $("table#tbl-answers tr").not(function(){if ($(this).has('th').length){return true}}).remove();
                // Send the request and update sub category dropdown
                $.ajax({
                    dataType: "json",
                    cache: false,
                    url: '/cartasur/answers/ajaxuserobjectives.json?user_id=' + id_value_string,
                    timeout: 5000,
                    error: function(XMLHttpRequest, errorTextStatus, error){
                        console.log("Failed to submit : "+ errorTextStatus+" ;"+error);
                    },
                    success: function(data){
                        // Clear all options from sub category select
                        $("select#objective_objective_id option").remove();
                        //put in a empty default line
                        var row = "<option value=\"" + "" + "\">" + "" + "</option>";
                        $(row).appendTo("select#objective_objective_id");

                        //clear previous results

                        $("#theprotocol").val("").trigger('change');

                        $("#protocol").val("").autocomplete("option", "source", '/cartasur/answers/ajaxuserobjectives.json?user_id=' + id_value_string);


                        /*// Fill sub category select
                         $.each(data, function(i, j){
                         row = "<option value=\"" + j.id + "\">" + j.objective_text + "</option>";
                         $(row).appendTo("select#objective_objective_id");
                         });
                         */
                    }
                });

            }
        });

        //hidden field value changed
        $("#theprotocol").change(function(){ //if you change dd change here!!
            var id_value_string = $(this).val();
            if (id_value_string === "") {
                // Clear all options from sub category select
                $("table#tbl-answers tr").not(function(){if ($(this).has('th').length){return true}}).remove();     // if the id is empty do not do any ajax

            }
            else {
                // Send the request and update sub category dropdown
                $.ajax({
                    dataType: "json",
                    cache: false,
                    url: '/cartasur/answers/ajaxuseranswers.json?protocol_id=' + id_value_string,
                    timeout: 3000,
                    error: function(XMLHttpRequest, errorTextStatus, error){
                        console.log("Failed to submit : "+ errorTextStatus+" ;"+error);
                    },
                    success: function(data){

                        // Clear all options from sub category select
                        $("table#tbl-answers tr").not(function(){if ($(this).has('th').length){return true}}).remove();
                        if (data && data.length > 0){
                            //add header
                            //$("<th>Question</th><th>Value</th><th>Type</th><th>Protocol</th>").appendTo("table#tbl-answers");
                            // Fill sub category select
                            $.each(data, function(i, j){
                                row = "<tr>";
                                row += "<td>" + j.question_id + "</td>"
                                row += "<td>" + j.value + "</td>";
                                row += "<td>" + j.answer_type + "</td>";
                                row += "<td>" + j.protocol_id + "</td>";
                                row += "</tr>";

                                $(row).appendTo("table#tbl-answers");
                            });
                        } else {
                           $("<tr><td colspan='5'>No answers for selected protocol</td> </tr>").appendTo("table#tbl-answers");
                        }

                    }
                });
            }
        });
    });
</script>

<div id="table">
  <h2>Administration</h2>
  <div class="intro-cartasur">
    <h3>Survey answers</h3>
    <br />This is the page for viewing answers by users after completing a track or protocol.  <br />
  </div>
</div>

<hr/>

<div >
<p>
  <b><%= label_tag("user_label","Select the user" )%></b>
  <%= collection_select(:protocol,:users_id, @users, :id, :login, :prompt => "" , :class => 'form_text_field_latlng') %>
</p>

<p>
  <b><%= label_tag("user_label","Search for a protocol" )%></b><br />
</p>
<p>
  <%= label_tag("protocol", (t 'cartasur.admin.answers.selectprotocol')) %>
  <%= text_field_tag 'protocol', nil, :class => 'form_text_field_protocol' %>
<input type="hidden" name="theprotocol" id="theprotocol" />
</p>

</div>
<hr />
<h3> Answers for selected protocol: </h3>
<table cellpadding="5" cellspacing="20" id="tbl-answers">
  <th>Question</th><th>Value</th><th>Type</th><th>Protocol</th>
  <% if @answers.blank? %> <tr><td colspan="4">There are no answers to show.</td></tr> <% else %>

      <% @answers.each do |answer| %>
          <tr>
            <td> <%= answer.question %> </td>
            <td> <%=  answer.value %> </td>
            <td> <%= answer.answer_type %></td>
            <td> <%= answer.protocol_id %> </td>
          </tr>

      <% end %>

   <% end %>

</table>

<br/>